import { PopMenu } from '@knno/jsx-ui/components/popMenu';
import { setLanguage } from '@knno/i18n';
import { cls, StyledProps } from '@knno/jsx';
import { Button } from './imports';
import SVGTheme from '@mdi/svg/svg/theme-light-dark.svg';
import SVGLanauge from '@mdi/svg/svg/translate-variant.svg';
import SVGSize from '@mdi/svg/svg/format-size.svg';

import { topBar } from './style.css';

let lang = 'zh';
let theme = 'System';
let zoom = '100%';

type TopBarProps = StyledProps<HTMLDivElement> & {
	onRefresh?: () => void;
};

export function TopBar(props: TopBarProps): Node {
	return (
		<div class={cls(props.class, topBar)} style={props.style}>
			<span>@Knno</span>
			<span style={{ flex: 1 }}></span>
			<Button
				icon={SVGLanauge}
				menu
				type="info-text"
				onClick={function () {
					PopMenu.show(
						[
							{ value: 'zh', text: '中文' },
							{ value: 'en', text: 'English' },
						].map((item) => (item.value === lang ? { ...item, checked: true } : item)),
						{
							refer: this,
							useAction: true,
							popupPosition: 'bottom-center',
						}
					).onSelect((row) => {
						lang = row.value + '';
						setLanguage(lang);
						props.onRefresh?.();
					});
				}}
			>
				语言 / Language
			</Button>
			<Button
				icon={SVGSize}
				menu
				type="info-text"
				onClick={function () {
					PopMenu.show(
						[{ text: '50%' }, { text: '75%' }, { text: '100%' }, { text: '125%' }, { text: '150%' }].map((item) =>
							item.text === zoom ? { ...item, checked: true } : item
						),
						{
							refer: this,
							useAction: true,
							popupPosition: 'bottom-center',
						}
					).onSelect((row) => {
						zoom = row.text + '';
						const z = parseInt(zoom) / 100;
						document.documentElement.style.fontSize = 14 * z + 'px';
					});
				}}
			>
				缩放
			</Button>
			<Button
				icon={SVGTheme}
				menu
				type="info-text"
				onClick={function () {
					PopMenu.show(
						[{ text: 'System' }, { text: 'Light' }, { text: 'Dark' }].map((item) =>
							item.text === theme ? { ...item, checked: true } : item
						),
						{
							refer: this,
							useAction: true,
							popupPosition: 'bottom-center',
						}
					).onSelect((row) => {
						theme = row.text + '';
						const root = document.documentElement;
						root.style.colorScheme = theme === 'System' ? 'light dark' : theme.toLowerCase();
						root.classList.remove('light', 'dark');
						if (theme === 'Light') {
							root.classList.add('light');
						} else if (theme === 'Dark') {
							root.classList.add('dark');
						}
					});
				}}
			>
				主题
			</Button>
		</div>
	);
}
